<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-04-16 18:04
 * @version 2.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 */
 -->
<template>
  <div class="test-table">

    <a title="导出" @click.prevent.stop="exportHandler"><h2>时间: {{ date }}</h2></a>
    <div class="test-table-table">
      <div class="test-table-table-row test-table-table-row-header">
        <span>序号</span>
        <span>货物</span>
        <span>计税方式</span>
        <span>征税项目</span>
        <span>即征即退</span>
        <span>单位</span>
        <span>数量</span>
        <span>金额</span>
        <span>税率</span>
        <span>税额</span>
      </div>
      <div class="test-table-table-row" v-for="(item,index) in data" :key="item.id">
        <span>{{ index + 1 }}</span>
        <span>{{ item.cargoName }}</span>
        <span>{{ getTaxMode(item.taxMode) }}</span>
        <span>-</span>
        <span>-</span>
        <span>{{ item.unit }}</span>
        <span>{{ item.amount }}</span>
        <span>{{ item.price }}</span>
        <span>{{ getTaxRate(item.taxRate) }}</span>
        <span>{{ item.taxPrice }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import CSV from 'comma-separated-values'

function downloadExcel(data, name) {
  const encodeStr = new CSV(data, {header: true}).encode();
  const blob = new Blob(["\ufeff" + encodeStr], {
    type: 'text/csv;charset=utf-8;'
  })
  const elink = document.createElement('a')
  elink.download = `${name}.csv`
  elink.style.display = 'none'
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  // 释放URL 对象
  URL.revokeObjectURL(elink.href)
  document.body.removeChild(elink)
}

export default {
  name: "table",
  props: {
    data: {
      type: Object
    },
    date: {
      type: String
    }
  },
  methods: {
    getTaxMode(mode) {
      switch (mode) {
        case '3':
          return '免税'
        case '0':
          return '一般计税'
        default:
          return '-'
      }
    },
    getTaxRate(rate) {
      return rate * 100 + '%'
    },
    exportHandler() {
      const {data} = this
      const arr = []
      for (const item of data) {
        arr.push({
          '货物': item.cargoName,
          '计税方式': this.getTaxMode(item.taxMode),
          '征税项目': '-',
          '即征即退': '-',
          '单位': item.unit,
          '数量': item.amount,
          '金额': item.price,
          '税率': this.getTaxRate(item.taxRate),
          '税额': item.taxPrice,
        })
      }
      downloadExcel(arr, this.date)
    }
  }

}

// const d = {
//   "id": "8209099357",
//   "lineNumber": 1,
//   "cargoName": "*蔬菜*土豆",
//   "price": 1400.00,
//   "hasTax": null,
//   "taxRate": 0.000000,
//   "taxPrice": 0.00,
//   "totalPrice": 1400.00,
//   "spec": null,
//   "taxCategory": null,
//   "taxItem": "0",
//   "unitPrice": 5.000000,
//   "unit": "公斤",
//   "amount": 280.000000,
//   "customerId": 351594612829280,
//   "taxMode": "3",
//   "taxItemCode": "1010112020000000000",
//   "inList": null,
//   "invoiceType": "1",
//   "taxItemType": null,
//   "invoiceId": 2077709584,
//   "withdrawal": "0",
//   "netWeight": null,
//   "grossWeight": null,
//   "originalPrice": 1400.00,
//   "originalTax": 0.00,
//   "fixedAsset": false,
//   "discountTaxRate": 1
// }
</script>

<style scoped>
.test-table {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid #333;
  padding: 5px;
  height: 800px;
  position: relative;
  overflow: hidden;
}

.test-table-table {
  width: 100%;
  max-height: 700px;
  overflow-y: auto;
}

.test-table-table-row-header {
  font-size: 18px;
  font-weight: bold;
  color: #f44;
  position: sticky;
  top: 0;
  background-color: #fff;
}

.test-table-table-row {
  display: grid;
  grid-template-columns: 50px 200px repeat(8, 120px);
  grid-column-gap: 3px;
  line-height: 28px;
  cursor: pointer;
}

.test-table-table-row:hover:not(.test-table-table-row-header), .test-table-table-row:focus:not(.test-table-table-row-header) {
  background-color: #999;
  color: #fff;
}
</style>
